# callback const printString = (string) =>{ setTimeout( ()=>{ console.log(string) }, Math.floor(Math,random() * 100) + 1 ) } const printAll = () =>{ printString("A"); printString("B"); printString("C"); } - 위 코드의 결과는 실행시마다 달라진다. 비동기 함수이지만 순서를 제어할수가 없다. const printString = (string, callback) =>{ setTimeout( ()=>{ console.log(string); callback(); console.log(`${string}종료`) }, Math.floor(Math.rando..

# 객체 지향 프로그래밍 - 실제 세계를 모델링하여 소프트웨어를 개발하는 것. - 절차지향의 반대의미가아닌 목적으로하는 개념이 다름. 객체지향은 객체간의 '관계/상호작용'에 중점을 둠 - 코드의 재활용성이 높음, 유지보수가 쉬움, 협업에 유리함. - 설계에 시간이 많이듬 # OOP Basic Concepts Encapsulation - 은닉화 : 구현은 숨기고 동작은 노출 ( 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만들고 객체 외부에서 필요한 동작만 노출) - 관련된 기능과 데이터를 하나의 단위로 묶음 - 느슨한 결합에 유리, 언제든 구현을 수정할 수 있음. ( 코드 실행 순서에 따라 절차적으로 코드를 작성하는것이 아닌, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는것. 즉 코드만 보..

# javascript는 prototype기반언어 이다. - javascript의 모든 객체들이 메소드와 속성들을 상속받기위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는의미. - 상속되는 속성과 메소드들은 해당 객체가 아니라 prototype속성에 정의 되어 있다. - 즉 prototype은 상속받은 멤버들이 정의되는 곳이다.(해당 객체가 복사되는것이 아닌 마치 체인을 타고 올라가며 접근하는것 처럼 '참조'하고 있음) - 프로토타입 객체는 '__proto__ 속성으로 접근 가능한 내장 객체이고, 'prototype 속성'은 상속 시키려는 멤버들이 정의된 객체를 가리킨다. [[Prototype]]은 __proto__로 접근이 가능하고 obj.toString은 prototype ..

c++, c#에서의 this는 인스턴스 자기 자신을 가리키는 포인터로 사용이 된다.따라서 this키워드를 이용하여 자신의 메서드나 변수에 접근할 수 있었다. 그러나 javascript의 this는 조금 다르다. javascript의 this는 '함수의 호출 방식'에 따라 this에 바인딩 되는 객체가 달라진다. - 내부함수가 일반 함수, 메서드, 콜백함수라면 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다. let obj = { myVar: 'foo', myFunc: function() { console.log(this.myVar) setTimeout(function() { console.log(this.myVar) }, 1000) } } obj.myFunc() // foo ... undef..

이벤트 - 브라우저에서 이벤트란 사용자가 버튼을 누르거나 키를 누르거나 웹페이지가 로드되었을때 등 을 말한다. 이것은 DOM 요소와 관련이있다. - 브라우저는 이벤트를 감지하고 통지함으로써 사용자와 웹페이지 간의 상호작용이 가능해진다. 이벤트 핸들러 - 이벤트가 발생하면 그에 맞는 반응이 필요하다. 이를 위해 일반적으로 '함수'와 연결하며 '이 함수'는 이벤트가 발생할 때만 실행된다. '이 함수'를 '이벤트 핸들러' 라고 정의한다. 이벤트 리스너 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트를 처리할 핸들러를 추가할 수 있는 오브젝트 이벤트 리스너는 javascript이벤트가 발생할 때 사용자가 등록한 함수를 호출한다. 이벤트, 리스너의 종류 https://developer.mozilla.org/en..

DocumentFragment 의 정의 - 메모리에서만 정의되고, 기본적으로 DOM과 동일하게 작동하지만 HTML의 DOM트리에는 영향을 주지않음. DocumentFragment 사용, 일반적인 방식과 차이 const DF = document.createDocumentFragment(); const elDiv = document.createElement("div"); elDiv.textContent = "hi" DF.appendChild(elDiv); console.log(DF.textContent)//hi document.body.appendChild(DF) console.log(DF.textContent) // "" - body에 붙이면 만들었던 DocumentFragment의 값들은 이전된다. - ..